<template>
	<el-container>
		<el-header> <el-button type="primary" @click="back_url()">返回</el-button></el-header>
		<el-main>
				 <el-form ref="form" :model="form" label-width="80px" class="form">
				 	<el-form-item label="标题">
				 	    <el-input v-model="form.title"></el-input>
				 	</el-form-item>
					
					<el-form-item label="绑定房屋">
					    <el-select v-model="form.bind_house" class="select">
							 <el-option label="不绑定" :value="0"></el-option>
					          <el-option :label="item.name" :value="item.id" v-for="(item,index) in house" :key="index"></el-option>
					        </el-select>
					</el-form-item>
					
				
			
					
					<el-form-item label="封面图">
						<template v-if="form.img!=''">
							<div style="display: flex;  flex-wrap: wrap;">
								<template>
									<i class="el-icon-circle-close" @click="delimg()"></i>
									<div class="picA" v-if="form.imgs.url!=''">
										<img class="img" :src="getimg + form.imgs.url">
									</div>
								</template>
							</div>
						</template>
						<div class="picA" style="margin-left: 19px;" @click="choose_pic(0)" v-if="form.img==''">
							<i class="el-icon-plus" style="margin-top: 45%; height: 28px; width: 28px;"></i>
						</div>
					</el-form-item>
					
					
					<el-form-item label="商品详情" class="quill-editor">
					<Edit :contents="form.content" :content_back="get_content"></Edit>
					</el-form-item>
					<el-form-item class="sub">
					    <el-button type="primary" @click="submitForm()">提交</el-button>
					  </el-form-item>
				 </el-form>
		</el-main>
		<Pic :drawer="drawer" :back_fun="back" :send_father="get_img"></Pic>
	</el-container>
</template>

<script>
	import Pic from '../../components/pic_upload.vue'
	import Edit from '../../components/quill-editor.vue'
	import {Api_url} from '../../api/config.js'
	import ArticleModel from '../../model/article.js'
	import HouseModel from '../../model/house.js'
		export default {
			data(){
				return{
					getimg:Api_url,
					drawer:false,
					edit_type:0,
					house:[],
					form:{
						title:'',
						content:'',
						read:0,
						img:'',
						bind_house:'',
						imgs:{
							url:''
						}
					}
				}
			},
			components:{
				Pic,
				Edit
			},
			mounted(){
				
				let article=JSON.parse(localStorage.getItem('edit_goods'));
				
				if(article)
				{
					this.edit_type=1
					this.form=article
					console.log("form",this.form)
					localStorage.removeItem('edit_goods')
				}
				
				this.get_house()
			},
			methods:{
				delimg(){
					this.form.imgs={
						url:''
					};
					this.form.img=''
				},
				get_img(e){
					this.form.imgs=e
					this.form.img=e.id
					this.drawer=false
				},
				submitForm(){
					if(this.edit_type==0){
						ArticleModel.insert(this.form).then(res=>{
							if(res.code==200){
								this.$message({
								         message: '添加成功',
								         type: 'success'
								       });
									this.back_url()
							}
						})
					}else{
						ArticleModel.update(this.form).then(res=>{
							if(res.code==200){
								this.$message({
								         message: '更新成功',
								         type: 'success'
								       });
									this.back_url()
							}
						})
					}
					
				},
				get_content(e){
					this.form.content=e
				},
				get_house(){
					HouseModel.get_house().then(res=>{
						this.house=res.data
					})
				},
				back(e){
					this.drawer=false
				},
				choose_pic() {
					this.drawer = !this.drawer	
				}
			}
		}
</script>

<style>
	.form{
		width: 400px;
	}
	.select{
		width: 100%;
	}
	
	.picA {
		width: 148px;
		height: 148px;
		background-color: #FBFDFF;
		border: 1px dashed #C0CCDA;
		border-radius: 6px;
		box-sizing: border-box;
		vertical-align: top;
		text-align: center;
		margin: 6px;
	}
	
	.img {
		width: 144px;
		height: 144px;
		border: 1px solid #BFBFBF;
		border-radius: 3px;
	}
	
	.banner{
		width: 1000px;
	}
	
	.banner_img{
		display: flex;
		flex-wrap: wrap;
	}
	.sku_input{
		width: 150px;
	}
	.sku_data{
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
	}
	.quill-editor{
		width: 1000px;
		height: 250px;
	}
	.sub{
		margin-top: 100px;
	}
</style>
